<script setup lang="ts">
import { ref, onMounted, inject, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
let headerTitle = ref([
    { name: '首页', link: '/', id: 1 },
    { name: '软件', link: '/one', id: 2 },
    { name: '前端设计', link: '/two', id: 3 },
])
let router = useRouter()
let route = useRoute()
let navData = ref<any>([])
let navListData = ref<any>([])
let $axios = inject<any>('$axios')
//控制头部navList显示隐藏
let show = ref(false)
let navShow = ref(false)
console.log(route.path);
console.log(route.path != '/');
watch(route, () => {
    if (route.path != '/') {
        navShow.value = true
    } else {
        navShow.value = false
    }
})

onMounted(() => {
    $axios.get(`/nav`).then((res: { data: never[]; }) => {
        navData.value = res.data
        console.log(navData);

    })
    $axios.get(`/navList`).then((res: { data: never[]; }) => {
        navListData.value = res.data
        console.log(navListData);

    })
})

function showList() {
    console.log(123);
    console.log(show.value);

    show.value = !show.value
}

</script>


<template>
    <div class="home">
        <div class="header">
            <div>
                <img src="	https://m.51sjk.com/Content/images/public/logo.png" alt="">
            </div>
            <div>
                <div @click="router.push(item.link)" v-for="(item, i) in headerTitle" :key="i">{{ item.name }}</div>
            </div>
            <div>
                <i class="iconfont icon-fangdajing"></i>
                <i class="iconfont icon-liebiao2"></i>
            </div>
            <div v-if="navShow">
                <div>
                    <div>
                        <div v-for="(v, i) in navData" :key="i">{{ v.name }}</div>
                    </div>
                    <i @click="showList" class="iconfont icon-xiangxiajiantou"></i>
                </div>
                <div v-show="show">
                    <div v-for="(v, i) in navListData" :key="i">{{ v.name }}</div>
                </div>
            </div>
        </div>
        <div :style="{ 'padding-top': navShow ? 110 + 'px' : 70 + 'px' }">
            <RouterView></RouterView>
        </div>
        <div class="footer">
            <div>
                <input type="text" placeholder="请输入搜索关键词">
                <i class="iconfont icon-fangdajing"></i>
            </div>
            <div>
                <div v-for="(v, i) in headerTitle" :key="i">{{ v.name }}</div>
            </div>
            <div>Copyright 2018 51数据库(www.51sjk.com)</div>
        </div>
    </div>
</template>


<style lang="less">
* {
    margin: 0;
    padding: 0;
}

.home {
    >div:nth-child(2) {
        box-sizing: border-box;
        padding: 10px 15px;
    }
}

.header {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 20px 0 rgba(51, 3, 14, .4);
    background: #fb558d;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    >div:nth-child(1) {
        width: 15%;

        >img {
            width: 100%;
        }
    }

    >div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px 0 20px;
        font-size: 20px;
        color: #fff;
        margin-left: 30px;
    }

    >div:nth-child(3) {
        width: 17%;
        color: white;

        i {
            font-size: 25px;
            margin: 0 5px;
        }
    }

    >div:nth-child(4) {
        position: absolute;
        left: 0;
        top: 55px;
        width: 100%;
        display: flex;
        flex-direction: column;
        z-index: 100;
        text-align: center;
        box-sizing: border-box;
        background: #f5f5f5;
        padding: 0 10px;
        box-shadow: 0 5px 9px rgba(0, 0, 0, .18);

        >div:nth-child(1) {
            display: flex;
            align-items: center;
            font-size: 18px;

            >div:nth-child(1) {
                flex: 1;
                display: flex;
                justify-content: space-between;

                >div {
                    padding: 10px 15px;
                }
            }

            >i {
                width: 5%;
            }
        }

        >div:nth-child(2) {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            >div {
                width: 22%;
                margin: 10px 1.5%;
                background: #e9e6e6;
                padding: 5px 0;
            }
        }

    }
}

.footer {
    padding: 20px 0;

    >div:nth-child(1) {
        text-align: center;
        margin-top: 20px;
        position: relative;

        >input {
            width: 85%;
            height: 30px;
            border-radius: 20px;
        }

        input::placeholder {
            text-indent: 1em;
        }

        >i {
            position: absolute;
            right: 10%;
            top: 10px;
        }
    }

    >div:nth-child(2) {
        display: flex;
        box-sizing: border-box;
        padding: 0 10%;

        >div {
            margin: 15px 20px;
        }
    }

    >div:nth-child(3) {
        text-align: center;
        color: #999;
        font-size: 13px;
    }
}</style>